<template>
    <div id="footer">
        <el-checkbox v-model="checkedAll" size="small" />
        <span>{{ numberSelect }}</span>
        <span>{{ datas.length }}</span>
        <el-button @click="delAll">清除已完成任务</el-button>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const props = defineProps(['datas'])
const emit = defineEmits(['delSelect'])
// 已完成的待办数量
const numberSelect = computed(() => {
    return props.datas.filter((data) => data.ischecked).length
})
// 全选
const checkedAll = computed({
    get(){
        return props.datas.every((data) => data.ischecked) && props.datas.length > 0
    },
    set(status) {
        props.datas.forEach((data) => {
            data.ischecked = status
        })
    }
})
const delAll = () => {
    let newDatas = props.datas.filter((data) => !data.ischecked)
    emit('delSelect', newDatas)
}
</script>

<style scoped>
#footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
